<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css">
  <style>
    body {
      user-select: none;
      font-size: 20px;
      background-color: green;
      color: white;
      font-family: 'Helvetica', 'Arial', sans-serif;
    }
    .display {
      font-size: 40px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    ul.display {
        margin: 0;
        padding: 0 4px;
    }
    .display li {
        margin: 0 8px 0 0;
        display: inline-block;
    }
    p {
        margin: 8px;
    }
    i {
      color: yellowgreen;
      margin: 0 2px;
      cursor: pointer;
    }
    b {
        margin: 0 4px;
        color: #ccc;
    }
    i.large {
      font-size: 32px;
    }
    span {
      /* font-size: 20px;
      color: #333; */
    }
  </style>
</head>
<body>

  <ul class="display">
    <li>キル<b>:</b><span id="counter1">0</span></li>
    <li>アシスト<b>:</b><span id="counter2">0</span></li>
    <li>デス<b>:</b><span id="counter3">0</span></li>
    <li>K/D<b>:</b><span id="counter4">0</span></li>
  </ul>

  <p>
    キル<i class="bi bi-plus-circle-fill" id="button1a"></i><i class="bi bi-dash-circle-fill" id="button1b"></i>
    アシスト<i class="bi bi-plus-circle-fill" id="button2a"></i><i class="bi bi-dash-circle-fill" id="button2b"></i>
    デス<i class="bi bi-plus-circle-fill" id="button3a"></i><i class="bi bi-dash-circle-fill" id="button3b"></i>
  </p>

  <script>
    // クリック回数を0で初期化
    let c1 = 0;
    let c2 = 0;
    let c3 = 0;

    // ボタンの要素を取得
    const button1a = document.getElementById('button1a');
    const button1b = document.getElementById('button1b');
    const button2a = document.getElementById('button2a');
    const button2b = document.getElementById('button2b');
    const button3a = document.getElementById('button3a');
    const button3b = document.getElementById('button3b');

    // カウンターの要素を取得
    const counter1 = document.getElementById('counter1');
    const counter2 = document.getElementById('counter2');
    const counter3 = document.getElementById('counter3');
    const counter4 = document.getElementById('counter4');

    // クリックしたときの処理
    button1a.addEventListener('click', () => {
      // カウンターを1増やす
      c1++;

      // 表示
      counter1.textContent = c1;
      counter4.textContent = (Math.floor(c1/c3 * 100)) / 100;
      if (c3 === 0) {
        counter4.textContent = (Math.floor(c1/1 * 100)) / 100;
      }
    });
    button1b.addEventListener('click', () => {
      if (c1 > 0) {
      c1--;
      }

      // 表示
      counter1.textContent = c1;
      counter4.textContent = (Math.floor(c1/c3 * 100)) / 100;
      if (c3 === 0) {
        counter4.textContent = (Math.floor(c1/1 * 100)) / 100;
      }
    });
    button2a.addEventListener('click', () => {
      // カウンターを1増やす
      c2++;
      // クリック回数を表示
      counter2.textContent = c2;
    });
    button2b.addEventListener('click', () => {
      if (c2 > 0) {
      c2--;
      }
      // クリック回数を表示
      counter2.textContent = c2;
    });
    button3a.addEventListener('click', () => {
      // カウンターを1増やす
      c3++;
      // 表示
      counter3.textContent = c3;
      counter4.textContent = (Math.floor(c1/c3 * 100)) / 100;
    });
    button3b.addEventListener('click', () => {
      if (c3 === 0) {
        c3 = 1;
      }
      if (c3 > 0) {
        c3--;
      }
      // 表示
      counter3.textContent = c3;
      counter4.textContent = (Math.floor(c1/c3 * 100)) / 100;
      if (c3 === 0) {
        counter4.textContent = (Math.floor(c1/1 * 100)) / 100;
      }
    });
  </script>
</body>
</html>